<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-title">收益列表</view>
    
    <!-- 总计信息行 -->
    <view class="totals-container" v-if="total > 0">
      <view class="total-item">
        <text class="total-label">累计获奖次数：</text>
        <text class="total-value">{{ total }} 次</text>
      </view>
      <view class="total-item">
        <text class="total-label">累计获奖总金额：</text>
        <text class="total-value">¥{{ totalAmount.toFixed(2) }}</text>
      </view>
    </view>
    
    <!-- 列表容器 -->
    <view class="list-container">
      <!-- 表头 -->
      <view class="list-header">
        <view class="list-item rank">名次</view>
        <view class="list-item amount">金额</view>
        <view class="list-item time">结算时间</view>
        <view class="list-item status">是否领取</view>
      </view>
      
      <!-- 列表内容 -->
      <view class="list-body">
        <!-- 列表项 -->
        <view 
          class="list-item-row" 
          v-for="(item, index) in listData" 
          :key="index"
          :class="{ 'alternate-row': index % 2 === 1 }"
        >
          <view class="list-item rank">{{ item.rank }}</view>
          <view class="list-item amount">¥{{ item.amount.toFixed(2) }}</view>
          <view class="list-item time">{{ formatTime(item.settlementTime) }}</view>
          <view class="list-item status">
            <view class="status-tag" :class="item.received ? 'received' : 'unreceived'">
              {{ item.received ? '已领取' : '未领取' }}
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="listData.length === 0 && !loading">
          <view class="empty-icon">
            <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
          </view>
          <view class="empty-text">暂无数据</view>
        </view>
        
        <!-- 加载中状态 -->
        <view class="loading-state" v-if="loading">
          <uni-loading-icon size="24" color="#007aff"></uni-loading-icon>
          <view class="loading-text">加载中...</view>
        </view>
      </view>
    </view>
    
    <!-- 分页控件 -->
    <view class="pagination" v-if="total > 0">
      <view class="page-size-selector">
        <text>每页显示:</text>
        <picker 
          :value="pageSizeIndex" 
          @change="onPageSizeChange"
          :range="pageSizeOptions"
          range-key="label"
        >
          <view class="picker-view">
            {{ currentPageSize }} 条
          </view>
        </picker>
      </view>
      
      <view class="page-controls">
        <button 
          class="page-btn" 
          @click="prevPage"
          :disabled="currentPage === 1 || loading"
        >
          上一页
        </button>
        
        <view class="page-info">
          第 {{ currentPage }} / {{ totalPages }} 页
        </view>
        
        <button 
          class="page-btn" 
          @click="nextPage"
          :disabled="currentPage === totalPages || loading"
        >
          下一页
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      listData: [],
      // 分页参数
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      totalAmount: 0, // 新增：累计总金额
      // 每页显示条数选项
      pageSizeOptions: [
        { value: 5, label: '5' },
        { value: 10, label: '10' },
        { value: 20, label: '20' },
        { value: 50, label: '50' }
      ],
      pageSizeIndex: 1, // 默认选中10条
      // 加载状态
      loading: false
    };
  },
  
  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.total / this.currentPageSize) || 1;
    }
  },
  
  onLoad() {
    // 页面加载时获取第一页数据
    this.fetchListData();
  },
  
  methods: {
    // 获取列表数据
    fetchListData() {
      // 显示加载状态
      this.loading = true;
      
      // 模拟API请求
      setTimeout(() => {
        // 生成模拟数据
        const mockData = [];
        const start = (this.currentPage - 1) * this.currentPageSize + 1;
        const end = Math.min(start + this.currentPageSize - 1, 100); // 模拟总共有100条数据
        
        // 计算总金额（实际项目中应该从API获取）
        let totalAmt = 0;
        for (let i = 1; i <= 100; i++) {
          // 这里使用和列表项相同的计算方式生成金额，确保总金额计算一致
          totalAmt += Math.random() * 1000 + 100;
        }
        this.totalAmount = totalAmt;
        
        // 生成当前页数据
        for (let i = start; i <= end; i++) {
          mockData.push({
            rank: i,
            amount: Math.random() * 1000 + 100, // 100-1100之间的随机金额
            settlementTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000), // 30天内的随机时间
            received: Math.random() > 0.3 // 70%概率已领取
          });
        }
        
        this.listData = mockData;
        this.total = 100; // 模拟总数据量（累计获奖次数）
        this.loading = false;
      }, 800);
    },
    
    // 格式化时间
    formatTime(date) {
      if (!(date instanceof Date)) {
        date = new Date(date);
      }
      const year = date.getFullYear();
      const month = this.padZero(date.getMonth() + 1);
      const day = this.padZero(date.getDate());
      const hour = this.padZero(date.getHours());
      const minute = this.padZero(date.getMinutes());
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    // 补零
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },
    
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchListData();
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      }
    },
    
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchListData();
        // 滚动到顶部
        uni.pageScrollTo({ scrollTop: 0, duration: 300 });
      }
    },
    
    // 改变每页显示条数
    onPageSizeChange(e) {
      const index = e.detail.value;
      this.pageSizeIndex = index;
      this.currentPageSize = this.pageSizeOptions[index].value;
      this.currentPage = 1; // 重置到第一页
      this.fetchListData();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  padding: 16px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

/* 新增：总计信息样式 */
.totals-container {
  margin: 10px;
  padding: 12px 16px;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.total-item {
  display: flex;
  align-items: center;
}

.total-label {
  font-size: 14px;
  color: #666;
  margin-right: 4px;
}

.total-value {
  font-size: 15px;
  font-weight: bold;
  color: #e63946;
}

.list-container {
  flex: 1;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.list-header {
  display: flex;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.list-item {
  padding: 14px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank {
  flex: 1;
}

.amount {
  flex: 2;
}

.time {
  flex: 3;
}

.status {
  flex: 2;
}

.list-body {
  display: flex;
  flex-direction: column;
}

.list-item-row {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  transition: background-color 0.2s;
}

.list-item-row:last-child {
  border-bottom: none;
}

.list-item-row.alternate-row {
  background-color: #fafafa;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.status-tag.received {
  background-color: #e6f7ee;
  color: #00b42a;
}

.status-tag.unreceived {
  background-color: #fff2e8;
  color: #ff7d00;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
}

.empty-icon {
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-text {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}

/* 分页控件样式 */
.pagination {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #ffffff;
  border-top: 1px solid #eee;
}

.page-size-selector {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.picker-view {
  margin-left: 8px;
  padding: 4px 0;
  color: #007aff;
}

.page-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.page-btn {
  min-width: 80px;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #007aff;
  color: #ffffff;
}

.page-btn:disabled {
  background-color: #cccccc;
  color: #ffffff;
}

.page-info {
  font-size: 14px;
  color: #333;
}
</style>
